<template>
  <!-- 分类界面 -->
  <div>
    <!-- 头部搜索框 -->
    <div class="top">
      <van-search v-model="value" left-icon="search" placeholder="请输入搜索关键词" to_shopping-action>
        <template #action>
          <van-button type="danger" size="small">搜索</van-button>
        </template>
      </van-search>
    </div>
    <!-- 左侧标签栏 -->
    <div class="center">
      <div class="my_left">
        <van-sidebar v-model="activeKey">
          <a v-for="(item,index) in list" :key="index">
            <van-sidebar-item :title="item.name" @click="skip(index)">
            </van-sidebar-item>
          </a>
        </van-sidebar>
      </div>
      <!-- 右侧内容栏 -->
      <div class="my_right" ref="myright" @scroll="monitor">
        <p v-for="(item,index) in list" :key="index" class="right_title">{{item.name}}
          <van-grid :border="false" :column-num="3">
            <van-grid-item v-for="(item1,index1) in (list[index].goods?list[index].goods.slice(0,9):'')" :key="index1"
              @click="to_shopping(item1)">
              <van-image :src="item1.imgs[0]?item1.imgs[0].url:this.$url +'img/redmi9.jpg'">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <p class="one">{{item1.name}}</p>
            </van-grid-item>
          </van-grid>
        </p>
      </div>
      <van-popup v-model="show" position="right" :style="{ width: '100%',height:'101%' }">
        <shopping v-on:exit="show=false" :data_base='form'></shopping>
      </van-popup>
    </div>
  </div>
</template>
<script>
import shopping from "./shopping.vue";
export default {
  components: { shopping },
  data() {
    return {
      value: "",
      activeKey: 0,
      list: [],
      show: false,
      form: {},
    };
  },
  mounted() {
    //固定上方搜索栏
    let a = document.querySelector(".top").offsetHeight;
    let b = document.querySelector(".van-tabbar").offsetHeight;
    document.querySelector(".center").style.height =
      window.innerHeight - a - b + "px";
    let c = document.querySelector(".van-search").offsetHeight;
    document.querySelector(".center").style.top = c + "px";
  },
  created() {
    let myurl = this.$url + "classifys_read";
    this.axios.post(myurl).then((res) => {
      let a = res.data.data;
      a = a.replace(/\\/g, "");
      a = a.replace(/:"\[/g, ":[");
      a = a.replace(/\]"/g, "]");
      a = a.replace(/:"{/g, ":{");
      a = a.replace(/}"/g, "}");
      a = JSON.parse(a);
      for (let i = 0; i < a.length; i++) {
        let c = {};
        c.par = [];
        c.name = a[i].name;
        for (let j = 0; j < a[i].ico.length; j++) {
          let b = {};
          b.ico = a[i].ico[j];
          b.text1 = a[i].text1[j];
          b.text2 = a[i].text2[j];
          c.par.push(b);
        }
        this.list.push(c);
      }
    });
    this.getDate();
    this.$forceUpdate();
  },
  methods: {
    getDate() {
      let myurl = this.$url + "goods_read";
      this.axios.post(myurl).then((res) => {
        let a = res.data.data;
        a = a.replace(/\\r\\n/g, "");
        a = a.replace(/\\/g, "");
        a = a.replace(/:"\[/g, ":[");
        a = a.replace(/\]"/g, "]");
        a = a.replace(/:"{/g, ":{");
        a = a.replace(/}"/g, "}");
        a = JSON.parse(a);
        for (let j = 0; j < this.list.length; j++) {
          let b = [];
          for (let i = 0; i < a.length; i++) {
            if (a[i].classify == this.list[j].name) {
              b.push(a[i]);
            }
            this.list[j].goods = b;
          }
        }
        this.$nextTick(function () {
          this.skip(this.activeKey);
          this.$forceUpdate();
        });
      });
    },
    //滚动跳转
    skip(index) {
      // console.log(index);
      // let top = document.querySelector(".van-search").offsetHeight;
      this.$nextTick(function () {
        var aaa = document.querySelectorAll(".right_title")[index].offsetTop;
        this.$refs.myright.scrollTo(0, aaa);
      });
    },
    //滚动监听
    monitor() {
      //scrollTop 大元素中子元素滚动的值,存在父元素中,当子元素可以滚动时,该值开始变化
      //offsetTop 子元素子距离父元素顶部的值,天生自带,

      this.$nextTick(function () {
        var aaa = this.$refs.myright.scrollTop;
        var bbb = document.querySelectorAll(".right_title");
        let height = [];
        for (let i = 0; i < bbb.length; i++) {
          height.push(bbb[i].offsetTop);
        }
        for (let i = 1; i < height.length; i++) {
          if (aaa - height[i] < 0) {
            this.activeKey = i - 1;
            break;
          }
        }
      });
    },
    to_shopping(a) {
      this.form = a;
      this.show = true;
    },
  },
  beforeRouteEnter(to, from, next) {
    // console.log(to);
    // console.log(from);
    next((vm) => {
      vm.activeKey = vm.$route.params.activeKey - 0;
    });
  },
};
</script>
<style scoped>
.center {
  display: flex;
}
.my_left {
  flex: 1;
  overflow: scroll;
}
.my_right {
  flex: 4;
  overflow: scroll;
}
.my_left::-webkit-scrollbar {
  display: none;
}
.my_right::-webkit-scrollbar {
  display: none;
}
.one {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.6);
}
.right_title {
  text-align: center;
}
.van-search {
  position: fixed;
  top: 0;
  width: 100%;
  height: 8%;
  z-index: 99;
}
.center {
  position: relative;
}
</style>